<template>
  <div class="data-charts">
    <!-- NPK含量对比图表 -->
    <div class="chart-section">
      <div class="chart-header">
        <div class="chart-title">
          <span class="title-icon"></span>
          NPK含量对比
        </div>
      </div>
      <div ref="npkChartRef" class="chart-body"></div>
    </div>

    <!-- 温湿度趋势图表 -->
    <div class="chart-section">
      <div class="chart-header">
        <div class="chart-title">
          <span class="title-icon"></span>
          温湿度趋势
        </div>
        <div class="chart-tabs">
          <div 
            class="tab-item" 
            :class="{ active: tempUnit === 'day' }"
            @click="tempUnit = 'day'"
          >日</div>
          <div 
            class="tab-item" 
            :class="{ active: tempUnit === 'week' }"
            @click="tempUnit = 'week'"
          >周</div>
        </div>
      </div>
      <div ref="tempHumidityChartRef" class="chart-body"></div>
    </div>
  </div>
</template>

<style scoped>
.data-charts {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 5px;
}

.chart-section {
  height: calc(50% - 4px);
  display: flex;
  flex-direction: column;
  background: rgba(14, 36, 82, 0.4);
  border: 1px solid rgba(126, 198, 153, 0.1);
  border-radius: 4px;
  padding: 8px;
}

.chart-header {
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.chart-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #7ec699;
  font-weight: 500;
}

.title-icon {
  width: 3px;
  height: 13px;
  background: #7ec699;
  border-radius: 2px;
}

.chart-tabs {
  display: flex;
  gap: 1px;
  padding: 2px;
  background: rgba(126, 198, 153, 0.1);
  border-radius: 4px;
}

.tab-item {
  padding: 3px 10px;
  font-size: 12px;
  color: #7ec699;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: #7ec699;
  color: #fff;
}

.chart-body {
  flex: 1;
  min-height: 0;
}

:deep(.el-select) {
  width: 70px;
}

:deep(.el-input__wrapper) {
  padding: 0 8px;
  background: rgba(126, 198, 153, 0.1);
  box-shadow: none !important;
  border: 1px solid rgba(126, 198, 153, 0.2);
}

:deep(.el-input__wrapper:hover) {
  border-color: rgba(126, 198, 153, 0.4);
}

:deep(.el-input__inner) {
  height: 24px;
  line-height: 24px;
  color: #7ec699;
  font-size: 12px;
}

:deep(.el-select-dropdown__item) {
  font-size: 12px;
}

:deep(.el-select-dropdown__item.selected) {
  color: #7ec699;
  font-weight: bold;
}

/* 响应式调整 */
@media screen and (max-width: 1600px) {
  .data-charts {
    gap: 8px;
  }
  
  .chart-section {
    height: calc(50% - 4px);
    padding: 10px;
  }
}

@media screen and (max-width: 1366px) {
  .data-charts {
    gap: 6px;
  }
  
  .chart-section {
    height: calc(50% - 3px);
    padding: 8px;
  }
}
</style>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

const timeRange = ref('24h')
const tempUnit = ref('day')

// 图表实例
const npkChartRef = ref(null)
const tempHumidityChartRef = ref(null)
const deviceStatsChartRef = ref(null)
const soilScoreChartRef = ref(null)

let npkChart = null
let tempHumidityChart = null
let deviceStatsChart = null
let soilScoreChart = null

// 初始化NPK含量对比图表
const initNPKChart = () => {
  if (npkChartRef.value) {
    npkChart = echarts.init(npkChartRef.value)
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        show: true,
        data: ['氮含量', '磷含量', '钾含量'],
        textStyle: { 
          color: '#7ec699',
          fontSize: 12,
          width: 'auto'
        },
        top: 0,
        left: 'center',
        orient: 'horizontal',
        itemWidth: 10,
        itemHeight: 6,
        itemGap: 30,
        padding: [0, 0, 0, 0],
        formatter: name => name.replace('含量', '')
      },
      grid: {
        top: 25,
        right: 15,
        bottom: 5,
        left: 50,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1时', '9时', '17时'],
        axisLabel: { 
          color: '#7ec699',
          fontSize: 12,
          interval: 0
        },
        axisLine: { 
          lineStyle: { 
            color: 'rgba(126, 198, 153, 0.3)' 
          } 
        }
      },
      yAxis: {
        type: 'value',
        name: 'mg/kg',
        nameTextStyle: {
          color: '#7ec699',
          fontSize: 12,
          padding: [0, 0, 0, 30]
        },
        axisLabel: { 
          color: '#7ec699',
          fontSize: 12,
          margin: 8
        },
        axisLine: { 
          lineStyle: { 
            color: 'rgba(126, 198, 153, 0.3)' 
          } 
        },
        splitLine: { 
          lineStyle: { 
            color: 'rgba(126, 198, 153, 0.1)',
            type: 'dashed'
          } 
        },
        max: 300,
        interval: 50
      },
      series: [
        {
          name: '氮含量',
          type: 'bar',
          barWidth: 12,
          barGap: '20%',
          data: [120, 101, 90],
          itemStyle: { 
            color: '#e76f51',
            borderRadius: [2, 2, 0, 0]
          }
        },
        {
          name: '磷含量',
          type: 'bar',
          barWidth: 12,
          data: [220, 191, 290],
          itemStyle: { 
            color: '#e9c46a',
            borderRadius: [2, 2, 0, 0]
          }
        },
        {
          name: '钾含量',
          type: 'bar',
          barWidth: 12,
          data: [150, 201, 190],
          itemStyle: { 
            color: '#2a9d8f',
            borderRadius: [2, 2, 0, 0]
          }
        }
      ]
    }
    npkChart.setOption(option)
  }
}

// 初始化温湿度趋势图表
const initTempHumidityChart = () => {
  if (tempHumidityChartRef.value) {
    tempHumidityChart = echarts.init(tempHumidityChartRef.value)
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line'
        }
      },
      legend: {
        data: ['温度', '湿度'],
        textStyle: { 
          color: '#7ec699',
          fontSize: 12
        },
        top: 0,
        right: 10,
        itemWidth: 15,
        itemHeight: 10,
        itemGap: 15
      },
      grid: {
        top: 40,
        right: 20,
        bottom: 20,
        left: 40,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '06:00', '12:00', '18:00', '24:00'],
        axisLabel: { 
          color: '#7ec699',
          fontSize: 12,
          interval: 0
        },
        axisLine: { 
          lineStyle: { 
            color: 'rgba(126, 198, 153, 0.3)' 
          } 
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '温度(°C)',
          nameTextStyle: {
            color: '#7ec699',
            fontSize: 12,
            padding: [0, 0, 0, 30]
          },
          position: 'left',
          axisLabel: { 
            color: '#7ec699',
            fontSize: 12
          },
          axisLine: { 
            lineStyle: { 
              color: 'rgba(126, 198, 153, 0.3)' 
            } 
          },
          splitLine: { 
            lineStyle: { 
              color: 'rgba(126, 198, 153, 0.1)',
              type: 'dashed'
            } 
          }
        },
        {
          type: 'value',
          name: '湿度(%)',
          nameTextStyle: {
            color: '#7ec699',
            fontSize: 12,
            padding: [0, 30, 0, 0]
          },
          position: 'right',
          axisLabel: { 
            color: '#7ec699',
            fontSize: 12
          },
          axisLine: { 
            lineStyle: { 
              color: 'rgba(126, 198, 153, 0.3)' 
            } 
          },
          splitLine: { show: false }
        }
      ],
      series: [
        {
          name: '温度',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: [23, 24, 25, 26, 25],
          itemStyle: { color: '#f4a261' },
          lineStyle: { width: 2 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(244, 162, 97, 0.3)' },
              { offset: 1, color: 'rgba(244, 162, 97, 0)' }
            ])
          }
        },
        {
          name: '湿度',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          yAxisIndex: 1,
          data: [65, 64, 63, 65, 64],
          itemStyle: { color: '#2a9d8f' },
          lineStyle: { width: 2 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(42, 157, 143, 0.3)' },
              { offset: 1, color: 'rgba(42, 157, 143, 0)' }
            ])
          }
        }
      ]
    }
    tempHumidityChart.setOption(option)
  }
}

// 初始化设备数据统计图表
const initDeviceStatsChart = () => {
  if (deviceStatsChartRef.value) {
    deviceStatsChart = echarts.init(deviceStatsChartRef.value)
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        textStyle: { color: '#7ec699' }
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#0f1325',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: 'bold',
              color: '#fff'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '温度传感器', itemStyle: { color: '#f4a261' } },
            { value: 735, name: '湿度传感器', itemStyle: { color: '#2a9d8f' } },
            { value: 580, name: '氮含量传感器', itemStyle: { color: '#e76f51' } },
            { value: 484, name: '磷含量传感器', itemStyle: { color: '#e9c46a' } },
            { value: 300, name: '钾含量传感器', itemStyle: { color: '#264653' } }
          ]
        }
      ]
    }
    deviceStatsChart.setOption(option)
  }
}

// 初始化土壤评分图表
const initSoilScoreChart = () => {
  if (soilScoreChartRef.value) {
    soilScoreChart = echarts.init(soilScoreChartRef.value)
    const option = {
      series: [
        {
          type: 'gauge',
          radius: '90%',
          progress: {
            show: true,
            width: 18,
            itemStyle: { color: '#7ec699' }
          },
          axisLine: {
            lineStyle: {
              width: 18,
              color: [[1, 'rgba(126, 198, 153, 0.1)']]
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 2,
              color: '#7ec699'
            }
          },
          axisLabel: {
            distance: 25,
            color: '#7ec699',
            fontSize: 14
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 25,
            itemStyle: {
              color: '#7ec699'
            }
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            fontSize: 30,
            offsetCenter: [0, '70%'],
            formatter: '{value}分',
            color: '#7ec699'
          },
          data: [
            {
              value: 85
            }
          ]
        }
      ]
    }
    soilScoreChart.setOption(option)
  }
}

// 监听时间范围变化
watch(timeRange, (newVal) => {
  // 根据选择的时间范围更新图表数据
})

// 监听温度单位变化
watch(tempUnit, (newVal) => {
  // 根据选择的单位更新温湿度图表
})

onMounted(() => {
  initNPKChart()
  initTempHumidityChart()
  initDeviceStatsChart()
  initSoilScoreChart()

  // 自适应窗口大小
  window.addEventListener('resize', () => {
    npkChart?.resize()
    tempHumidityChart?.resize()
    deviceStatsChart?.resize()
    soilScoreChart?.resize()
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', () => {})
  npkChart?.dispose()
  tempHumidityChart?.dispose()
  deviceStatsChart?.dispose()
  soilScoreChart?.dispose()
})
</script> 